<template>
  <div class="infoItem" @click="goDetial">
    <img v-if="params.pic !=null && params.pic!=''" :src="params.pic" alt="" >
    <div v-if="params.pic ==null || params.pic==''" class="demoOmg  flex-center">
      <span>{{ selectTitle }}</span>
    </div>
    <div class="box">
      <span class="title">{{ params.title }}</span>
      <span class="time">{{params.createdTime}} </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "infoItem",
  methods:{
    goDetial(){
      let {href} = this.$router.resolve({name:'detail',query:{id:this.params.id}})
      window.open(href,'_blank')
    },
  },
  props:{
    params:{
      default:()=>{}
    },
    selectTitle:{
      default:''
    }
  }
}
</script>

<style scoped lang="less">
.infoItem{
  cursor: pointer;
  display: flex;
  img{
    width: 16rem;
    height: 9.6rem;
    margin-right: 1.5rem;
  }
  .demoOmg{
    width: 16rem;
    height: 9.6rem;
    margin-right: 1.5rem;
    background-image: url("../../../assets/header-bg.png");
    background-size: 100% 100%;
    color: white;
    font-size: 2.1rem;
  }
  .box{
    display: flex;
    flex-direction: column;
    width: 19.7rem;
    .title{
      font-size: 1.7rem;
      color: #333333;
      height: 6.7rem;
      overflow:hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      margin-bottom: 1rem;
    }
    .time{
      width: 100%;
      text-align: right;
      font-size: 1.7rem;
      color: #999999;
    }
  }
}

</style>